<template>
  <view>
    <!-- :class="[!isChild ? 'border-b-1 border-b-solid pb-4 border-[#EDEDED]' : '']" -->
    <view v-for="(item, index) in data" :key="index">
      <view class="flex pt-4 mb-2">
        <wd-img
          :src="item.avatar"
          :width="styles.avatarSize"
          :height="styles.avatarSize"
          :round="true"
        ></wd-img>
        <view class="flex-1 flex flex-col ml-2">
          <text class="text-[#9A9A9A] text-[26rpx]">{{ item.nickname }}</text>
          <view class="text-base text-md my-[6rpx]">
            <text v-if="isChild">
              <text class="mr-2">回复</text>
              <text class="text-[#9A9A9A]">{{ item.reply.nickname }}：</text>
            </text>
            <text>{{ item.comment }}</text>
          </view>

          <view class="text-sm">
            <text class="text-[#9A9A9A]">{{ item.create_time }}</text>
            <text class="text-[#434343] ml-[20rpx]" @click="handleRecover(item)">回复</text>
          </view>

          <review-list
            v-if="item.showReview && item.children && item.children.length > 0"
            :data="item.children"
            :isChild="true"
            @recover="handleRecover"
          ></review-list>
        </view>
      </view>

      <wd-divider v-if="!isChild" content-position="left">
        <view
          class="flex justify-center items-center text-sm text-[#9a9a9a]"
          @click="openReview(item, index)"
        >
          <text class="mr-[4rpx]">{{ item.showReview ? '收起回复' : '展开回复' }}</text>
          <wd-icon
            :name="item.showReview ? 'arrow-up' : 'arrow-down'"
            size="24rpx"
            color="#9a9a9a"
          />
        </view>
      </wd-divider>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  isChild: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['recover', 'open'])

const styles = computed(() => {
  return {
    avatarSize: props.isChild ? '36rpx' : '66rpx',
  }
})

function openReview(item, index) {
  emit('open', { item, index })
}

function handleRecover(item) {
  emit('recover', item)
}
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
}
</script>
<style lang="scss" scoped></style>
